<template>
  <div class="login">
    <van-image round
               width="100px"
               height="100px"
               class="image"
               :src="headImg" />
    <van-cell-group>
      <van-field v-model="username"
                 required
                 clearable
                 label="用户名"
                 right-icon="question-o"
                 placeholder="请输入用户名"
                 @click-right-icon="$toast('用户名默认手机号')" />
      <van-field v-model="password"
                 type="password"
                 label="密码"
                 placeholder="请输入密码"
                 required />
    </van-cell-group>
    <van-button type="primary"
                class="btn"
                @click="handleLogin">登录</van-button>
  </div>
</template>

<script>
import headImg from '../../assets/imgs/ctzl.jpg'
export default {
  data () {
    return {
      headImg: headImg,
      username: '',
      password: ''
    }
  },

  components: {},

  computed: {},

  methods: {
    /* 点击登录 */
    handleLogin () {
      /* 首先校验数据的规则如：必填，数组等。
        而后请求判断账号密码的正确性，并返回需要的参数
        如：token，cookie等 */
      this.$toast('登录成功');
    }
  }
}

</script>
<style lang='css' scoped>
.login {
  height: calc(100vh);
  /* position: relative; */
  /* bottom: 250px; */
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  background-color: #f8f8f8;
}
.image {
  margin-bottom: 80px;
}
.van-cell-group {
  width: 100%;
}
.btn {
  margin-top: 30px;
  padding: 0 300px;
  font-size: 40px;
}
</style>